<!-- 角色=> 个人  -- 市场化征信 -->
<template>
  <div class="main">
    <PureTableBar title="全维度画像体系" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="addVisible = true"> 新增指数体系 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="tableList" :columns="columns" :checkList="checkList" :pagination="pagination"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="CheckCreditReport(row)">
              查看
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <div class="financialin">
      <ReDialog :width="1200" :height="550" :models="addVisible" @Closes="CloseVisible()">
        <template #header>
          <h2 style=" text-align: center;">新建指数体系</h2>
        </template>
        <template #main>
          <el-scrollbar height="500px">
            <el-form label-width="120px">
              <el-form-item label="体系名称:">
                <el-input placeholder="体系名称" v-model.trim="title" style="width: 70%" />
              </el-form-item>
              <el-form-item label="指数模型类：">
                <el-select v-model="selectType" multiple style="width: 70%;">
                  <el-option v-for="(  item, li  ) in   selectList  " :key="item.value" :label="item.name"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
            <!-- 履约能力指数模型 -->
            <div v-if="variables.PerformanceCapability">
              <addition-model :ModeData="performanceCapabilityList[0]" title="履约能力指数模型"
                ref="PerformanceCapability"></addition-model>
            </div>
            <!-- 消费能力指数模型 -->
            <div v-if="variables.SpendingPower">
              <addition-model :ModeData="spendingPowerList[0]" title="消费能力指数模型" ref="SpendingPower"></addition-model>
            </div>
            <!-- 资金需求指数模型 -->
            <div v-if="variables.FundingRequirements">
              <addition-model :ModeData="fundingRequirementsList[0]" title="资金需求指数模型"
                ref="FundingRequirements"></addition-model>
            </div>
            <!-- 个人稳定性指数模型 -->
            <div v-if="variables.PersonalStability">
              <addition-model :ModeData="personalStabilityList[0]" title="个人稳定性指数模型"
                ref="PersonalStability"></addition-model>
            </div>
            <!-- 恶意透支指数模型 -->
            <div v-if="variables.MaliciousOverdraft">
              <addition-model :ModeData="maliciousOverdraftList[0]" title="恶意透支指数模型"
                ref="MaliciousOverdraft"></addition-model>
            </div>
            <!-- 社交活跃性指数模型 -->
            <div v-if="variables.SocialActivity">
              <addition-model :ModeData="socialActivityList[0]" title="社交活跃性指数模型" ref="SocialActivity"></addition-model>
            </div>
            <!-- 网购倾向指数模型 -->
            <div v-if="variables.OnlineShopping">
              <addition-model :ModeData="onlineShoppingList[0]" title="网购倾向指数模型" ref="OnlineShopping"></addition-model>
            </div>
            <!-- 游戏沉迷指数模型 -->
            <div v-if="variables.GameAddiction">
              <addition-model :ModeData="gameAddictionList[0]" title="游戏沉迷指数模型" ref="GameAddiction"></addition-model>
            </div>
          </el-scrollbar>
        </template>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="SubmitVisible()" type="primary" :loading="BtnLoading">确定</el-button>
            <el-button @click="CloseVisible()"> 取消 </el-button>
          </span>
        </template>
      </ReDialog>
      <ReDialog :width="1200" :height="550" :models="showVisible" @Closes="closeShowVisible()">
        <template #header>
          <h2 style="text-align: center;">查看指数评分模型</h2>
        </template>
        <template #main>
          <el-scrollbar height="500px">
            <el-form label-width="120px">
              <el-form-item label="体系名称:">
                <el-input placeholder="体系名称" v-model="showTitle" style="width: 70%" disabled />
              </el-form-item>
              <el-form-item label="指数模型类：">
                <el-select v-model="showSelectModel" multiple style="width: 70%;" disabled>
                  <el-option v-for="(  item, li  ) in   selectList  " :key="item.value" :label="item.name"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
            <!-- 个人稳定性指数模型 -->
            <show-model v-for="(item) in showData" :title="item.modelName" :key="item.modelCode"
              :detailData="item.modelInfoData"></show-model>
          </el-scrollbar>
        </template>
      </ReDialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useCreditReport } from "./hook/imageIndex";
import additionModel from "./component/additionModel.vue"
import showModel from './component/showModel.vue'
import { ref } from "vue";
const CreditFrom = ref();
const {
  dataList,
  tableList,
  loading,
  pagination,
  columns,
  ShowReport,
  addVisible,
  title,
  selectList,
  selectType,
  variables,
  BtnLoading,
  personalStabilityList,
  gameAddictionList,
  performanceCapabilityList,
  maliciousOverdraftList,
  fundingRequirementsList,
  socialActivityList,
  onlineShoppingList,
  spendingPowerList,
  PersonalStability,
  GameAddiction,
  PerformanceCapability,
  MaliciousOverdraft,
  FundingRequirements,
  SocialActivity,
  OnlineShopping,
  SpendingPower,
  showVisible,
  showTitle,
  showData,
  showSelectModel,
  SubmitVisible,
  CloseVisible,
  handleSizeChange,
  handleCurrentChange,
  CheckCreditReport,
  closeShowVisible
} = useCreditReport()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.dialog-footer {
  margin: 0 auto;
  display: block;
  text-align: center;
}

.financialin .el-dialog__body {
  width: 100%;
  height: calc(100% - 90px);
  padding: 10px 20px;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
</style>
